<template>
  <el-dialog v-if="dialog" title="我的视频" custom-class="out-dialog" :close-on-click-modal="false" append-to-body :visible.sync="dialog">
    <div>
      <el-button type="primary" class="mb10" @click="openAddDialog">添加</el-button>
      <div class="goods-Material">
        <div class="goods-Material_left">
          <el-input v-model="groupName" class="search-btn" placeholder="搜索分组名称" />
          <el-tree
            ref="tree"
            :data="treeList"
            :highlight-current="true"
            :expand-on-click-node="false"
            default-expand-all
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ data }" class="custom-tree-node">
              <span>{{ data.name }} ({{ data.sourceCount }})</span>
            </span>
          </el-tree>
        </div>
        <div class="goods-Material_right">
          <vxe-table
            ref="refList"
            text-algin="center"
            border
            stripe
            resizable
            highlight-hover-row
            :data="list"
            :auto-resize="true"
            :height="380"
            :radio-config="{highlight: true}"
          >
            <vxe-table-column type="radio" width="50" title="选择" />
            <vxe-table-column field="name" min-width="120" title="视频名称" />
          </vxe-table>
          <vxe-pager
            :current-page.sync="searchParams.pageNum"
            :page-size.sync="searchParams.pageSize"
            :total="total"
            :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
            @page-change="getMaterialList"
          />
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialog = false">取 消</el-button>
      <el-button type="primary" @click="clickSure">确 定</el-button>
    </div>
    <el-dialog v-if="addDialog" custom-class="out-dialog" title="添加" :visible.sync="addDialog" :close-on-click-modal="false" append-to-body>
      <el-form ref="addForm" :model="addParams" :rules="addRules" label-width="7rem">
        <el-row>
          <el-col :span="13">
            <el-form-item prop="parentId" label="所在分组">
              <el-select v-model="addParams.parentId" filterable placeholder="请选择">
                <el-option v-for="item in selectList" :key="item.index" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item prop="sources" label="选择视频">
              <div style="flex: 1">
                <UploadBtn :multiple="true" :file-filter="['video/mp4']" :max-size="2" limit="9999" @setUrl="addUrl" />
                <ul>
                  <li v-for="(item, index) in addParams.sources" :key="index">
                    <p style="margin: 0 0 5px 0">
                      <span>{{ item.name }}</span>
                      <el-button class="fr" type="text" @click="delVideo(index)">删除</el-button>
                    </p>
                  </li>
                </ul>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="clickSureAdd">确 定</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { getMaterialGroupList, getMaterialList, addMaterial } from '@/api/file/source'
import UploadBtn from '@/components/upload/uploadBtn'

export default {
  components: {
    UploadBtn
  },
  props: {
    chooseList: {
      required: false,
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      checkList: [],
      active: 1,
      dialog: false,
      groupName: '',
      searchParams: {
        parentId: '',
        type: 2,
        rule: 1,
        pageNum: 1,
        pageSize: 20
      },
      total: 1,
      list: [],
      treeList: [],
      selectList: [],
      addParams: {
        type: 2,
        parentId: '',
        sources: []
      },
      addDialog: false,
      addRules: {
        parentId: [{ required: true, message: '请选择分组', trigger: 'change' }],
        sources: [{ type: 'array', required: true, message: '请选择视频', trigger: 'change' }],
        name: [{ required: true, message: '请输入分组名称', trigger: 'blur' }]
      }
    }
  },
  watch: {
    groupName(val) {
      this.$refs.tree.filter(val)
    },
    dialog(val) {
      if (val) {
        this.getMaterialGroupList()
      }
    }
  },
  methods: {
    delVideo(i) {
      this.addParams.sources.splice(i, 1)
      if (this.addParams.sources.length === 0) {
        this.$refs.addForm.validateField('sources')
      }
    },
    addUrl(url, name = '') {
      this.addParams.sources.push({
        name: name,
        path: url,
        contentType: url.split('.')[1]
      })
      this.$refs.addForm.clearValidate('sources')
    },
    openAddDialog() {
      this.addParams.parentId = ''
      this.addParams.sources = []
      this.addDialog = true
    },
    clickSureAdd() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          addMaterial(this.addParams).then(res => {
            this.$message.success('添加成功！')
            this.addDialog = false
            this.searchParams.pageNum = 1
            this.getMaterialList()
            this.getMaterialGroupList(1)
          })
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    getMaterialList() {
      getMaterialList({ ...this.searchParams }).then(res => {
        this.total = res.total
        this.list = res.records
      })
    },
    getMaterialGroupList(type = 0) {
      getMaterialGroupList({ type: 2 }).then(res => {
        this.treeList = res
        this.selectList = res[0].children
        if (res.length !== 0 && type === 0) {
          this.searchParams.parentId = ''
          this.getMaterialList()
        }
      })
    },
    handleNodeClick(data) {
      this.searchParams.parentId = data.name === '全部' ? '' : data.id
      this.searchParams.pageNum = 1
      this.getMaterialList()
    },
    clickSure() {
      if (!this.$refs.refList.getRadioRecord()) {
        this.$message.error('请选择视频')
        return false
      }
      this.$emit('getUrl', this.$refs.refList.getRadioRecord().path)
      this.dialog = false
    }
  }
}
</script>

<style lang="scss">
.goods-Material {
  display: flex;
  justify-content: space-between;
  .goods-Material_left {
    width: 20%;
    margin-right: 10px;
    .el-tree {
      height: 400px;
      overflow-y: scroll;
    }
  }
  .goods-Material_right {
    flex: 1;
  }
}
.out-dialog {
  width: 900px;
}
</style>
